<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item  :to="{ path: '/square' }">
                    <i class="el-icon-lx-file"></i> 数据广场
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 共享文件详情
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="warning" size="medium"  @click="handleCollect">收藏文件</el-button>

            <el-table :data="tableData"
                      border class="table"
                      ref="fieldTable"
                      header-cell-class-name="table-header"
                      style="margin-top: 20px"
            >
                <el-table-column label="序号">
                    <template #default="scope"><span>{{ scope.$index + 1 }}</span></template>
                </el-table-column>
                <el-table-column label="字段名">
                    <template #default="scope"><span>{{ scope.row.fieldName }}</span></template>
                </el-table-column>
                <el-table-column label="取值类型">
                    <template #default="scope">{{ scope.row.dataType }}</template>
                </el-table-column>
                <el-table-column label="空值率">
                    <template #default="scope">{{ handleNullRate(scope.row.nullRate) }}</template>
                </el-table-column>
                <el-table-column label="众数">
                    <template #default="scope">{{ scope.row.majority }}</template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                               :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {ref, reactive} from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import {getFileDescribe, getFileDetail} from "../../api/file";
    import {useRoute}from "vue-router";
    import {useRouter}from "vue-router";
    import {collectFile} from "../../api/square";

    export default {
        name: "ShareFileDetail",
        //训练特征
        setup() {
            const router = useRouter();
            const query = reactive({
                address: "",
                name: "",
                pageIndex: 1,
                pageSize: 10,
            });
            let fileInfoId;
            let AnalysisMethodName = ["数据分布", "散点图", "数据统计", "偏度-峰度", "皮尔森相关系数"];

            const tableData = ref([]);
            const pageTotal = ref(0);

            // 获取表格数据
            const getData = () => {
                const route = useRoute()
                console.log(route.query)
                if (route.query.fileId != null) {
                    const payload = {
                        fileInfoId: route.query.fileId,
                        userId: localStorage.getItem("ms_userId")
                    }
                    getFileDetail(payload).then(res => {
                        tableData.value = res.result.fileFields;
                        pageTotal.value = tableData.value.length
                        fileInfoId = route.query.fileId
                    })
                }
            };
            getData();

            // 查询操作
            const handleSearch = () => {
                query.pageIndex = 1;
                getData();
            };
            // 分页导航
            const handlePageChange = (val) => {
                query.pageIndex = val;
                getData();
            };

            // 表格编辑时弹窗和保存
            let analysisVisible = ref(false);
            let form = reactive({
                name: "",
                type: "",
                needLabel: "",
            });
            let analysisConfName = ref();

            let resultVisible = ref(false);
            let featureTip = ref(0);
            let labelTip = ref(0);

            const handleNullRate = (val) => {
                return val + "%";
            };

            const route = useRoute();
            const handleCollect = () => {
                const payload = {
                    userId: localStorage.getItem("ms_userId"),
                    fileId: route.query.fileId,
                };
                collectFile(payload).then(res => {
                    if (res.msg === "成功") {
                        ElMessage.success("已成功收藏文件！");
                    } else {
                        ElMessage.error("收藏文件失败！" + res.msg);
                    }
                })
            }

            return {
                query,
                route,
                AnalysisMethodName,
                tableData,
                pageTotal,
                analysisVisible,
                resultVisible,
                form,
                analysisConfName,
                featureTip,
                labelTip,
                getData,

                handleSearch,
                handlePageChange,
                handleNullRate,
                handleCollect
            };
        },
    }
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: skyblue;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }

</style>
